<script>
export default {
  name: "dwRow",
  props: {
    // gutter翻译是排水沟,非常贴切,它的作用是控制Row中元素的间隔
    gutter: Number,
    // 通过传入不同的tag来让row生成不同的标签
    tag: {
      type: String,
      default: "div",
    },
    // type主要是控制是否以 flex 和 grid 进行布局
    type: String,
    justify: {
      type: String,
      default: "start",
    },
    align: {
      type: String,
      default: "top",
    },
  },
  // 参考 https://www.cnblogs.com/yubin-/p/11543734.html
  render(h) {
    // console.log("this.$slots.default :>> ", this.$slots.default);
    const justify = this.type == "flex" || this.type == "grid" ? `justify-${this.justify}` : "";
    const align = this.type == "flex" || this.type == "grid" ? `align-${this.align}` : "";

    const style = {};
    if (this.gutter) {
      style.marginLeft = `-${this.gutter / 2}px`;
      style.marginRight = style.marginLeft;
    }
    // h（节点标签, 节点属性, html节点的子节点）
    return h(
      this.tag,
      {
        style,
        class: ["dw-row", justify, align, { flex: this.type == "flex" }, { grid: this.type == "grid" }],
      },
      this.$slots.default
    );
  },
};
</script>

<style scoped>
@import "./dwRow.css";
</style>
